<template>
  <el-dialog
    v-model="dialogVisible"
    title="报告预览"
    width="90%"
    :before-close="handleClose"
    class="report-preview-dialog"
  >
    <div class="report-preview">
      <!-- 工具栏 -->
      <div class="toolbar">
        <div class="toolbar-left">
          <el-button type="primary" @click="handlePrint">
            <el-icon><Printer /></el-icon>
            打印
          </el-button>
          <el-button @click="handleDownload">
            <el-icon><Download /></el-icon>
            下载PDF
          </el-button>
          <el-button @click="handleEdit">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
        </div>
        <div class="toolbar-right">
          <el-button-group>
            <el-button 
              :type="viewMode === 'preview' ? 'primary' : ''"
              @click="viewMode = 'preview'"
            >
              <el-icon><View /></el-icon>
              预览
            </el-button>
            <el-button 
              :type="viewMode === 'print' ? 'primary' : ''"
              @click="viewMode = 'print'"
            >
              <el-icon><Printer /></el-icon>
              打印版
            </el-button>
          </el-button-group>
        </div>
      </div>
      
      <!-- 报告内容 -->
      <div class="report-content" :class="{ 'print-mode': viewMode === 'print' }">
        <!-- 报告头部 -->
        <div class="report-header">
          <div class="hospital-info">
            <h1 class="hospital-name">{{ hospitalInfo.name }}</h1>
            <p class="hospital-address">{{ hospitalInfo.address }}</p>
            <p class="hospital-contact">电话：{{ hospitalInfo.phone }} | 网址：{{ hospitalInfo.website }}</p>
          </div>
          <div class="report-logo">
            <div class="logo-placeholder">
              <el-icon size="48"><Hospital /></el-icon>
            </div>
          </div>
        </div>
        
        <div class="report-title">
          <h2>体检报告</h2>
          <div class="report-subtitle">HEALTH EXAMINATION REPORT</div>
        </div>
        
        <!-- 患者信息 -->
        <div class="patient-info">
          <h3 class="section-title">基本信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">姓名：</span>
              <span class="value">{{ reportData.patientName }}</span>
            </div>
            <div class="info-item">
              <span class="label">性别：</span>
              <span class="value">{{ reportData.gender || '男' }}</span>
            </div>
            <div class="info-item">
              <span class="label">年龄：</span>
              <span class="value">{{ reportData.age || '35' }}岁</span>
            </div>
            <div class="info-item">
              <span class="label">报告编号：</span>
              <span class="value">{{ reportData.reportId }}</span>
            </div>
            <div class="info-item">
              <span class="label">体检日期：</span>
              <span class="value">{{ formatDate(reportData.checkupDate) }}</span>
            </div>
            <div class="info-item">
              <span class="label">报告日期：</span>
              <span class="value">{{ formatDate(new Date()) }}</span>
            </div>
            <div class="info-item">
              <span class="label">主检医生：</span>
              <span class="value">{{ reportData.primaryDoctor }}</span>
            </div>
            <div class="info-item">
              <span class="label">审核医生：</span>
              <span class="value">{{ reportData.reviewDoctor }}</span>
            </div>
          </div>
        </div>
        
        <!-- 检查结果 -->
        <div class="examination-results">
          <h3 class="section-title">检查结果</h3>
          <div class="results-table">
            <table>
              <thead>
                <tr>
                  <th>检查项目</th>
                  <th>检查结果</th>
                  <th>参考范围</th>
                  <th>异常标识</th>
                  <th>备注</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(result, index) in reportData.results" :key="index">
                  <td>{{ result.itemName }}</td>
                  <td>{{ result.value }}</td>
                  <td>{{ result.referenceRange }}</td>
                  <td>
                    <span 
                      class="abnormal-tag"
                      :class="getAbnormalClass(result.abnormal)"
                    >
                      {{ getAbnormalText(result.abnormal) }}
                    </span>
                  </td>
                  <td>{{ result.remark }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        
        <!-- 总结与建议 -->
        <div class="summary-section">
          <h3 class="section-title">总结与建议</h3>
          
          <div class="summary-item">
            <h4 class="summary-subtitle">总体评价</h4>
            <div class="summary-content">
              {{ reportData.summary?.overall || '暂无总体评价' }}
            </div>
          </div>
          
          <div class="summary-item" v-if="reportData.summary?.abnormalities">
            <h4 class="summary-subtitle">主要异常</h4>
            <div class="summary-content abnormalities">
              {{ reportData.summary.abnormalities }}
            </div>
          </div>
          
          <div class="summary-item" v-if="reportData.summary?.suggestions">
            <h4 class="summary-subtitle">健康建议</h4>
            <div class="summary-content suggestions">
              {{ reportData.summary.suggestions }}
            </div>
          </div>
        </div>
        
        <!-- 详细分析 -->
        <div class="analysis-section" v-if="reportData.analysis">
          <h3 class="section-title">详细分析</h3>
          <div class="analysis-content">
            <pre>{{ reportData.analysis }}</pre>
          </div>
        </div>
        
        <!-- 注意事项 -->
        <div class="notes-section" v-if="reportData.notes">
          <h3 class="section-title">注意事项</h3>
          <div class="notes-content">
            <pre>{{ reportData.notes }}</pre>
          </div>
        </div>
        
        <!-- 报告尾部 -->
        <div class="report-footer">
          <div class="signatures">
            <div class="signature-item">
              <div class="signature-line"></div>
              <div class="signature-label">主检医生签名</div>
            </div>
            <div class="signature-item">
              <div class="signature-line"></div>
              <div class="signature-label">审核医生签名</div>
            </div>
          </div>
          
          <div class="report-info">
            <p>本报告仅对本次检查结果负责</p>
            <p>如有疑问，请及时咨询医生</p>
            <p class="print-time">打印时间：{{ formatDateTime(new Date()) }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  reportData: {
    type: Object,
    default: () => ({})
  }
})

// Emits
const emit = defineEmits(['update:visible', 'edit', 'print', 'download'])

// 响应式数据
const viewMode = ref('preview')

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 医院信息
const hospitalInfo = reactive({
  name: '公卫体检中心',
  address: '北京市朝阳区健康路123号',
  phone: '010-12345678',
  website: 'www.gongwei-health.com'
})

// 方法
const handleClose = () => {
  dialogVisible.value = false
}

const handleConfirm = () => {
  handleClose()
}

const handlePrint = () => {
  // 设置打印样式
  viewMode.value = 'print'
  
  // 延迟执行打印，确保样式已应用
  setTimeout(() => {
    window.print()
    emit('print', props.reportData)
  }, 100)
}

const handleDownload = () => {
  ElMessage.info('PDF下载功能开发中')
  emit('download', props.reportData)
}

const handleEdit = () => {
  emit('edit', props.reportData)
  handleClose()
}

const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-CN')
}

const formatDateTime = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleString('zh-CN')
}

const getAbnormalClass = (abnormal) => {
  const classMap = {
    normal: 'normal',
    high: 'high',
    low: 'low',
    abnormal: 'abnormal'
  }
  return classMap[abnormal] || 'normal'
}

const getAbnormalText = (abnormal) => {
  const textMap = {
    normal: '正常',
    high: '偏高',
    low: '偏低',
    abnormal: '异常'
  }
  return textMap[abnormal] || '正常'
}
</script>

<style scoped>
.report-preview-dialog :deep(.el-dialog__body) {
  padding: 0;
  max-height: 85vh;
  overflow: hidden;
}

.report-preview {
  display: flex;
  flex-direction: column;
  height: 85vh;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
  background: #f8f9fa;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.report-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
  line-height: 1.6;
}

.report-content.print-mode {
  padding: 40px;
  font-size: 14px;
}

/* 报告头部 */
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #2c3e50;
}

.hospital-info {
  flex: 1;
}

.hospital-name {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.hospital-address,
.hospital-contact {
  margin: 4px 0;
  color: #6c757d;
  font-size: 14px;
}

.report-logo {
  display: flex;
  align-items: center;
}

.logo-placeholder {
  width: 80px;
  height: 80px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
}

/* 报告标题 */
.report-title {
  text-align: center;
  margin-bottom: 30px;
}

.report-title h2 {
  font-size: 28px;
  font-weight: bold;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.report-subtitle {
  font-size: 16px;
  color: #6c757d;
  letter-spacing: 2px;
}

/* 章节标题 */
.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  margin: 30px 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

/* 患者信息 */
.patient-info {
  margin-bottom: 30px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item .label {
  font-weight: 500;
  color: #495057;
  min-width: 80px;
}

.info-item .value {
  color: #2c3e50;
  font-weight: 500;
}

/* 检查结果表格 */
.examination-results {
  margin-bottom: 30px;
}

.results-table {
  margin-top: 15px;
  overflow-x: auto;
}

.results-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e4e7ed;
}

.results-table th,
.results-table td {
  padding: 12px 8px;
  text-align: left;
  border: 1px solid #e4e7ed;
}

.results-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.results-table td {
  color: #495057;
}

.abnormal-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.abnormal-tag.normal {
  background: #d4edda;
  color: #155724;
}

.abnormal-tag.high {
  background: #f8d7da;
  color: #721c24;
}

.abnormal-tag.low {
  background: #fff3cd;
  color: #856404;
}

.abnormal-tag.abnormal {
  background: #f5c6cb;
  color: #721c24;
}

/* 总结与建议 */
.summary-section {
  margin-bottom: 30px;
}

.summary-item {
  margin-bottom: 20px;
}

.summary-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.summary-content {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #007bff;
  color: #495057;
  line-height: 1.8;
}

.summary-content.abnormalities {
  border-left-color: #dc3545;
  background: #fff5f5;
}

.summary-content.suggestions {
  border-left-color: #28a745;
  background: #f0fff4;
}

/* 详细分析和注意事项 */
.analysis-section,
.notes-section {
  margin-bottom: 30px;
}

.analysis-content,
.notes-content {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.analysis-content pre,
.notes-content pre {
  margin: 0;
  font-family: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #495057;
  line-height: 1.8;
}

/* 报告尾部 */
.report-footer {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid #e4e7ed;
}

.signatures {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}

.signature-item {
  text-align: center;
}

.signature-line {
  width: 150px;
  height: 1px;
  background: #000;
  margin-bottom: 8px;
}

.signature-label {
  font-size: 14px;
  color: #6c757d;
}

.report-info {
  text-align: center;
  color: #6c757d;
  font-size: 12px;
}

.report-info p {
  margin: 4px 0;
}

.print-time {
  margin-top: 15px;
  font-style: italic;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e4e7ed;
  background: #f8f9fa;
}

/* 打印样式 */
@media print {
  .toolbar,
  .dialog-footer {
    display: none !important;
  }
  
  .report-content {
    padding: 0 !important;
    overflow: visible !important;
  }
  
  .report-preview-dialog :deep(.el-dialog) {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
  }
  
  .report-preview-dialog :deep(.el-dialog__header),
  .report-preview-dialog :deep(.el-dialog__footer) {
    display: none !important;
  }
  
  .report-preview-dialog :deep(.el-dialog__body) {
    padding: 0 !important;
    max-height: none !important;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .report-preview-dialog {
    width: 95% !important;
  }
  
  .toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .toolbar-left,
  .toolbar-right {
    justify-content: center;
  }
  
  .report-header {
    flex-direction: column;
    gap: 20px;
  }
  
  .hospital-name {
    font-size: 20px;
  }
  
  .report-title h2 {
    font-size: 24px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .results-table {
    font-size: 12px;
  }
  
  .signatures {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .report-content {
    padding: 15px;
  }
  
  .hospital-name {
    font-size: 18px;
  }
  
  .report-title h2 {
    font-size: 20px;
  }
  
  .section-title {
    font-size: 16px;
  }
  
  .results-table th,
  .results-table td {
    padding: 8px 4px;
    font-size: 11px;
  }
}
</style>